<template>
  <div class="agent">
    <div class="contaniner">
      <div class="left">
        <div style="height:150vh;background:#fff;overflow-y: auto;overflow-x:auto;white-space: nowrap;"> 
          <el-tree
            :data="agentUserList"
            :expand-on-click-node="true"
            :default-expand-all="false"
            ref="tree"
            @node-click="handleNodeClick"
          />
        </div>
      </div>
      <div class="right">
        <el-card class="box-card mt-15">
          <div class="home-form">
            <el-form ref="ruleForm" @submit.native.prevent>
              <el-row :gutter="50">
                <el-col :span="5">
                  <el-form-item label="代理名称" label-width="70px">
                    <el-input clearable size="mini" v-model.trim="queryData.username" maxlength="24"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="代理编号" label-width="70px">
                    <el-input clearable size="mini" v-model.trim="queryData.custNo" maxlength="24"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="手机号" label-width="70px">
                    <el-input clearable size="mini" v-model.trim="queryData.phone" maxlength="24"></el-input>
                  </el-form-item>
                </el-col>                  
                <el-col :span="5">
                  <el-form-item label-width="70px" label="代理级别">
                    <el-select size="mini" style="width:100%" v-model="queryData.agentLevel">
                      <el-option label="全部" value=""></el-option>
                      <el-option label="市级代理" value="jlwh0001"></el-option>
                      <el-option label="省级代理" value="jlwh0002"></el-option>
                      <el-option label="大区代理" value="jlwh0003"></el-option>
                      <el-option label="一星代理" value="jlwh0004"></el-option>
                      <el-option label="二星代理" value="jlwh0005"></el-option>
                      <el-option label="三星代理" value="jlwh0006"></el-option>
                      <el-option label="四星代理" value="jlwh0007"></el-option>
                      <el-option label="五星代理" value="jlwh0008"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label-width="70px" label="状态">
                    <el-select size="mini" style="width:100%" v-model="queryData.state">
                      <el-option label="全部" value=""></el-option>
                      <el-option label="待确认" value="0"></el-option>
                      <el-option label="已确认" value="1"></el-option>
                      <el-option label="停用" value="2"></el-option>
                      <el-option label="撤销" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label-width="70px" label="是否级联查询">
                    <el-select size="mini" style="width:100%" v-model="queryData.isCascade">
                      <el-option label="是" value="1"></el-option>
                      <el-option label="否" value="0"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="70px" label="注册时间">
                      <el-date-picker v-model="changtime" size="mini" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :editable='false' value-format="yyyy-MM-dd" :picker-options="pickerOptions" clearable>
                      </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-button type="primary" icon="el-icon-search" size="mini" @click="handleSearch" class="search-btn">搜索</el-button>
                  <el-button type="danger" size="mini" @click="handleReset" class="search-btn">重置</el-button>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </el-card>
        <el-card class="body">
          <div slot="header" class="clearfix fix-lh">
            <span>代理管理</span>
            <div v-show="!changeMode" class="btn-list">
              <el-button v-hasPermission="permission.edit" @click="handleAdd">新增</el-button>
              <el-button @click="goRefresh">刷新</el-button>
              <el-button @click="download">导出</el-button>
            </div>
          </div>
          <div class="table-body">
            <cvue-table :data="tableData" :isShowPage="pageShow" :page="page" :tablePage="tablePage" :pageSize="page.pageSize" :loading="tableLoading" @current-change="handleCurrentChange" @size-change="handleSizeChange" :option="tableOption">
              <template slot-scope="scope" slot="yhxm">
                <span>{{scope.row.yhxm }}</span>
              </template>  
              <template slot-scope="scope" slot="custNo">
                <span>{{scope.row.custNo}}</span>
              </template>          
              <template slot-scope="scope" slot="lxdh">
                <span>{{scope.row.lxdh}}</span>
              </template>
              <template slot-scope="scope" slot="djsj">
                <span>{{scope.row.djsj}}</span>
              </template>
              <template slot-scope="scope" slot="sfxnyh">
                <span>{{scope.row.sfxnyh ==1 ? '是' : scope.row.sfxnyh == 0 ? '否' : '-'}}</span>
              </template>
              <template slot-scope="scope" slot="sjtjrMc">
                <span>{{scope.row.sjtjrMc}}</span>
              </template>
              <template slot-scope="scope" slot="dljbId">
                <span>{{dljbType(scope.row.dljbId)}}</span>
              </template>
              <template slot-scope="scope" slot="yhzt">
                <span>{{stateType(scope.row.yhzt)}}</span>
              </template>
              <template slot-scope="scope" slot="tjrmc">
                <span>{{scope.row.tjrmc }}</span>
              </template>
              <template slot-scope="scope" slot="tjrmcNew">
                <span>{{scope.row.tjrmcNew }}</span>
              </template>
              <template slot-scope="scope" slot="khhmc">
                <span>{{scope.row.khhmc }}</span>
              </template>
              <template slot-scope="scope" slot="khm">
                <span>{{scope.row.khm }}</span>
              </template>
              <template slot-scope="scope" slot="yhkh">
                <span>{{scope.row.yhkh }}</span>
              </template>
              <template slot-scope="scope" slot="shdz">
                <span>{{scope.row.shdz }}</span>
              </template>
              <el-table-column v-if="hasPermission" slot="actionMenu" label="操作" align="center" header-align="center" fixed="right">
                <template slot-scope="scope">
                  <el-button type="text"
                    size="small"
                    @click="handleEdit(scope.row)"
                    v-hasPermission="permission.edit"
                    :disabled="changeMode">编辑</el-button>

                    <el-button type="text"
                    size="small"
                    @click="handleEditYhzt(scope.row)"
                    v-hasPermission="permission.edit"
                    v-show="hasRole" 
                    :disabled="!scope.row.yhzt == '0'"
                  >确认</el-button>
                </template>
              </el-table-column>
            </cvue-table>
          </div>
        </el-card>
      </div>
    </div>
    <!-- 新增、编辑弹出框 -->
    <cvue-dialog :dialogVisible="dialogVisible" :dialogLoading="dialogLoading" :stateFoot='true' :title="'新增'" dialogWidth="1190px" @handleOpen="dialogOpen" @closeDialog="closeDialog" @confirmDialog="confirmDialog" @handleClose="handleClose">
      <div class="dialog-body" slot="dialogBody">
        <el-form ref="dialog_rule" label-width="125px" class="demo-ruleForm" :model="agent" :rules="agentRule">
          <el-row>
            <el-col :span="8">
              <el-form-item label="代理号" prop="custNo">            
                <el-input v-model.trim="agent.custNo" :disabled="agentDisable.custNo == '0'"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="名称" prop="yhxm">
                <el-input v-model.trim="agent.yhxm" :disabled="agentDisable.yhxm == '0'"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号" prop="lxdh">
                <el-input v-model.trim="agent.lxdh" :disabled="agentDisable.lxdh == '0'"></el-input>
              </el-form-item>
            </el-col>          
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="身份证号" prop="sfzh">
                <el-input v-model.trim="agent.sfzh" :disabled="agentDisable.sfzh == '0'"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="出生年月" prop="csrq">
                <el-date-picker v-model="agent.csrq" type="date" placeholder="选择日期时间" value-format="yyyy-MM-dd" :disabled="agentDisable.csrq == '0'"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="性别" prop="xb">
                <el-select size="mini" style="width:100%" v-model="agent.xb" :disabled="agentDisable.xb == '0'">
                  <el-option label="男" value="1"></el-option>
                  <el-option label="女" value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>          
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="籍贯" prop="jg">
                <el-input v-model.trim="agent.jg" :disabled="agentDisable.jg == '0'"></el-input>
              </el-form-item>          
            </el-col>
            <el-col :span="8">
              <el-form-item label="代理级别" prop="dljbId">
                <el-select placeholder="请选择" v-model="agent.dljbId" class="select-width" :disabled="agentDisable.dljbId == '0'">
                    <el-option v-for="item in dljbSelect" :key="item.dljbId" :label="item.dljbmc" :value="item.dljbId"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
                  <el-form-item prop="yhzt" label="状态">
                    <el-select size="mini" style="width:100%" v-model="agent.yhzt" :disabled="agentDisable.yhzt == '0'">
                      <el-option label="待确认" value="0"></el-option>
                      <el-option label="已确认" value="1"></el-option>
                      <el-option label="停用" value="2"></el-option>
                      <el-option label="撤销" value="3"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>        
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="推荐人" prop="tjrId">
                <el-cascader :options="agentUserList" :props="optionProps" v-model.trim="agent.tjrId" :show-all-levels="false" filterable>
                </el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="新推荐人" prop="tjrIdNew">
                <el-cascader :options="agentUserList" :props="optionProps" v-model.trim="agent.tjrIdNew" :show-all-levels="false" filterable clearable>
                </el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="注册日期" prop="zcrq">
                <el-date-picker v-model="agent.zcrq" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" :disabled="agentDisable.zcrq == '0'"></el-date-picker>
              </el-form-item>
            </el-col>          
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="开户行名称" prop="khhmc">
                <el-input v-model.trim="agent.khhmc" :disabled="agentDisable.khhmc == '0'"></el-input>
              </el-form-item>
            </el-col>       
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="开户名" prop="khm">
                <el-input v-model.trim="agent.khm" :disabled="agentDisable.khm == '0'"></el-input>
              </el-form-item>
            </el-col>       
            <el-col :span="8">
              <el-form-item label="银行卡号" prop="yhkh">
                <el-input v-model.trim="agent.yhkh" :disabled="agentDisable.yhkh == '0'"></el-input>
              </el-form-item>
            </el-col> 
          </el-row>
          <el-row>  
            <el-col :span="24">
              <el-form-item label="收货地址" prop="shdz">
                <el-input v-model.trim="agent.shdz" :disabled="agentDisable.shdz == '0'"></el-input>
              </el-form-item>
            </el-col> 
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="登记人" prop="djr">
                <el-input v-model.trim="agent.djr" :disabled="agentDisable.djr == '0'"></el-input>
              </el-form-item>              
            </el-col>       
            <el-col :span="8">
              <el-form-item label="登记时间" prop="djsj">
                <el-date-picker v-model="agent.djsj" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss" :disabled="agentDisable.djsj == '0'"></el-date-picker>
              </el-form-item>
            </el-col> 
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="是否虚拟用户" prop="sfxnyh">                
                <el-select size="mini" style="width:100%" v-model="agent.sfxnyh" :disabled="agentDisable.sfxnyh == '0'">
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="0"></el-option>
                </el-select>
              </el-form-item>                          
            </el-col>       
            <el-col :span="8">
              <!-- <el-form-item label="实际用户" prop="sjtjr">
                <el-input v-model.trim="agent.sjtjr" :disabled="agentDisable.sjtjr == '0'"></el-input>
              </el-form-item> -->
              <el-form-item label="实际用户" prop="sjtjr">
                <el-cascader :options="agentUserList" :props="optionProps" v-model.trim="agent.sjtjr" :show-all-levels="false" filterable clearable>
                </el-cascader>
              </el-form-item>
            </el-col> 
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="伯乐奖是否结算" prop="bljsfjs">
                <el-select size="mini" style="width:100%" v-model="agent.bljsfjs" :disabled="agentDisable.bljsfjs == '0'">
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="0"></el-option>
                </el-select>
              </el-form-item>                        
            </el-col>       
            <el-col :span="8">
              <el-form-item label="贡献奖是否结算" prop="gxjsfjs">
                <el-select size="mini" style="width:100%" v-model="agent.gxjsfjs" :disabled="agentDisable.gxjsfjs == '0'">
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col> 
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="套餐金额" prop="tcje">
                <el-input v-model.trim="agent.tcje" :disabled="agentDisable.tcje == '0'"></el-input>
              </el-form-item>                       
            </el-col>       
            <el-col :span="8">
              <el-form-item label="第几代" prop="djd">
                <el-input v-model.trim="agent.djd" :disabled="agentDisable.djd == '0'"></el-input>
              </el-form-item>
            </el-col> 
          </el-row>
        </el-form>
      </div>
    </cvue-dialog>
  </div>

</template>
<script>
import cvueTable from '@/components/cvue-table'
import cvueDialog from '@/components/cvue-dialog'
import { touchRefresh } from '@/mixins/mixinKeep'

export default {
  name: 'agent',
  mixins: [touchRefresh],
  components: {
    cvueTable,
    cvueDialog
  },
  data () {
    var validateName = (rule, value, callback) => {
        if (this.addOrEdit == 'edit' && value == this.agent.tjrId) {
          callback()
        } else {
          var params = {
            name: value
          }
          this.$store.dispatch('agent/CheckAgent', params).then(res => {
            if (res.code == 200) {
              if (!res.data) {
                callback(new Error('该推荐人不存在'))
              } else {
                callback()
              }
            } else {
              callback(new Error(res.msg))
            }
          })
        }
    }

    // 地区选择验证
    let validTjrId = (rule, value, callback) => {
      // 直接用value 获取不到选中的值 
      // 所以直接 用HTML中 v-model 绑定的值来判断 是否有值
      if (this.agent.tjrId == null) {
        callback(new Error('请选择推荐人'))
      } else {
        callback()
      }
    }

    return {
      pickerOptions: {
        disabledDate (time) {
          return time > new Date().getTime()
        }
      },
      hasPermission: false,
      hasRole: false,
      changeMode: false,
      isDisabled: false,
      addOrEdit: 'add',
      user: {},
      changtime: '',
      queryData: { 
        agentId: '',
        username: '',
        custNo: '',        
        phone: '',
        beginDate: '',
        endDate: '',
        agentLevel: '',
        state: '',
        isCascade: '1'
      },
      optionProps: {
          value: 'id',
          label: 'label',
          children: 'children',
          checkStrictly: true,
          emitPath: false
      },
      dljbSelect: {
          dljbId: '',
          dljbmc: ''
      },     
      agentDisable: {
          roleId: '',
          custNo: '',
          yhxm: '',
          xb: '',
          jg: '',
          csrq: '',
          sfzh: '',
          lxdh: '',
          dljbId: '',
          shdz: '',
          khhmc: '',
          khm: '',
          yhkh: '',
          tjrId: '',
          tjrIdNew: '',
          zcrq: '',
          djr: '',
          djsj: '',
          dljb: '',
          sfxnyh: '',
          sjtjr: '',
          bljsfjs: '',
          gxjsfjs: '',
          djd: '',
          tcje: '',
          yhzt: ''
      },
      tablePage: 1,
      pageShow: true,
      page: {
        total: 1, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
        pageSizes: [10, 50, 100]
      },
      agentRule: {
        custNo: [
          { required: true, message: '请输入代理号！', trigger: 'blur' }
        ],
        yhxm: [
          { required: true, message: '请输入名称！', trigger: 'blur' }
        ],
        lxdh: [
          { required: true, message: '请输入手机号！', trigger: 'blur' }
        ],
        xb: [
          { required: true, message: '请选择性别！', trigger: 'blur' }
        ],
        tjrId: [
          { required: true, validator: validTjrId, message: '请输入推荐人ID！', trigger: 'blur' }
        ],
        sfxnyh: [
          { required: true, message: '请选择是否虚拟用户！', trigger: 'blur' }
        ]
      },
      tableLoading: false,
      date: [],
      tableData: [],
      tableOption: {
        stripe: true,
        border: true,
        width: '100%',
        index: false,
        cloumn: [
          { prop: 'index', label: '序号', align: 'center', width: 80 },
          { prop: 'yhxm', label: '代理名称', align: 'center', width: 80 },
          { prop: 'custNo', label: '代理编号', align: 'center', slotStatus: true },
          { prop: 'lxdh', label: '手机号', align: 'center', slotStatus: true },
          { prop: 'djsj', label: '注册日期', align: 'center', slotStatus: true },  
          { prop: 'sfxnyh', label: '是否虚拟用户', align: 'center', slotStatus: true },       
          { prop: 'sjtjrMc', label: '实际用户', align: 'center', slotStatus: true },  
          { prop: 'dljbId', label: '代理级别', align: 'center', slotStatus: true },
          { prop: 'yhzt', label: '状态', align: 'center', width: 150, slotStatus: true },
          { prop: 'tjrmc', label: '推荐人', align: 'center' },
          { prop: 'tjrmcNew', label: '新推荐人', align: 'center' },
          { prop: 'khhmc', label: '开户行名称', align: 'center' },
          { prop: 'khm', label: '开户名', align: 'center' },
          { prop: 'yhkh', label: '银行卡号', align: 'center' },
          { prop: 'shdz', label: '收获地址', align: 'center' }
        ]
      },
      agentUserList: [],
      dialogVisible: false,
      dialogLoading: false,
      agent: {
        custId: '',
        custNo: '',
        yhxm: '',
        xb: '',
        jg: '',
        csrq: '',
        sfzh: '',
        lxdh: '',
        dljbId: '',
        shdz: '',
        khhmc: '',
        khm: '',
        yhkh: '',
        zcrq: '',
        djr: '',
        djsj: '',
        dljb: '',
        sfxnyh: '',
        sjtjr: '',
        bljsfjs: '',
        gxjsfjs: '',
        djd: '',
        tcje: '',
        yhzt: ''
      }      
    }
  },
  filters: {
    formatTimer: function(value) {
        let date = new Date(value)
        let y = date.getFullYear()
        let MM = date.getMonth() + 1
        MM = MM < 10 ? '0' + MM : MM
        let d = date.getDate()
        d = d < 10 ? '0' + d : d
        let h = date.getHours()
        h = h < 10 ? '0' + h : h
        let m = date.getMinutes()
        m = m < 10 ? '0' + m : m
        let s = date.getSeconds()
        s = s < 10 ? '0' + s : s
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m
    }
  },

  methods: {
    cancelSave () {
      this.tableData = JSON.parse(JSON.stringify(this.oldData))
      this.tableObject.destroy()
      this.changeMode = false
    },
    handleChange(value) {
      
    },
    handleSelect (item) {
      
    },
    // 添加代理
    handleAdd () {
      this.id = ''
      this.dialogVisible = true
      this.addOrEdit = 'add'
      this.agent.djr = this.user.name
      this.agent.djsj = this.formatTimer()
      this.agent.dljbId = 'jlwh0001'
      this.agent.yhzt = '0'
      this.agent.sjtjr = null
      this.agent.tjrId = this.queryData.agentId == '' ? this.user.underCustId : this.queryData.agentId
    },
    // 刷新页面
    goRefresh () {
      this.fetchData()
    },
    // 改变pagesize
    handleSizeChange (val) {
      this.tablePage = 1
      this.page.pageSize = val
      this.fetchData()
    },
    // 改变页码
    handleCurrentChange (val) {
      this.tablePage = val
      // this.page.currentPage = val
      this.fetchData()
    },
    handleSearch () {
      this.tablePage = 1
      // this.page.currentPage = 1
      this.fetchData()
    },
    handleReset () {
      this.tablePage = 1
      // this.page.currentPage = 1
      this.queryData.agentId = ''
      this.queryData.username = ''
      this.queryData.custNo = ''
      this.queryData.phone = ''
      this.queryData.beginDate = ''
      this.queryData.endDate = ''
      this.changtime = ''
      this.queryData.agentLevel = ''
      this.queryData.state = ''
      this.queryData.isCascade = ''
      this.fetchData()
    },
    dialogOpen () {      
    },
    formatTimer() {
        let date = new Date()
        let y = date.getFullYear()
        let MM = date.getMonth() + 1
        MM = MM < 10 ? '0' + MM : MM
        let d = date.getDate()
        d = d < 10 ? '0' + d : d
        let h = date.getHours()
        h = h < 10 ? '0' + h : h
        let m = date.getMinutes()
        m = m < 10 ? '0' + m : m
        let s = date.getSeconds()
        s = s < 10 ? '0' + s : s
        return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s
    },
    // 关闭前
    handleClose () {
      this.accountList = []
      this.$refs.dialog_rule.clearValidate()
      this.$refs.dialog_rule.resetFields()
      this.dialogVisible = false
      this.agent = {
            custId: '',
            custNo: '',
            yhxm: '',
            xb: '',
            jg: '',
            csrq: '',
            sfzh: '',
            lxdh: '',
            dljbId: '',
            shdz: '',
            khhmc: '',
            khm: '',
            yhkh: '',
            zcrq: '',
            djr: '',
            djsj: '',
            dljb: '',
            sfxnyh: '',
            sjtjr: '',
            bljsfjs: '',
            gxjsfjs: '',
            djd: '',
            tcje: '',
            yhzt: ''
      }
    },
    // 关闭dialog
    closeDialog (index, row) {
      this.accountList = []
      this.$refs.dialog_rule.clearValidate()
      this.$refs.dialog_rule.resetFields()
      this.dialogVisible = false
      this.agent = {
            custId: '',
            custNo: '',
            yhxm: '',
            xb: '',
            jg: '',
            csrq: '',
            sfzh: '',
            lxdh: '',
            dljbId: '',
            shdz: '',
            khhmc: '',
            khm: '',
            yhkh: '',
            zcrq: '',
            djr: '',
            djsj: '',
            dljb: '',
            sfxnyh: '',
            sjtjr: '',
            bljsfjs: '',
            gxjsfjs: '',
            djd: '',
            tcje: '',
            yhzt: ''
      }
    },
    // 表单验证
    validForm (formName) {
      let status = false
      this.$refs[formName].validate((valid) => {
        if (valid) {
          status = true
        } else {
          status = false
        }
      })
      return status
    },
    selectDljb (event) {
        this.agent.dljb = event
    },
    // 确认用户状态
    handleEditYhzt (item) {
      this.$confirm('确认修改代理人用户状态为已确认？', '提示', {
          confirmButtonText: '确认',
          canceButtonText: '取消',
          type: 'warning'
      }).then(() => {
        this.$store.dispatch('agent/UpdateAgentState', item.custId).then((res) => {
          if (res.code === 200) {
            this.$message({
              type: 'success',
              message: '修改成功'
            })
            this.fetchData()
            this.fetchGetAgentList()
          } else {
            this.$message.error(res.msg)
          }
        })
      })
    },
    // 编辑
    handleEdit (item) {
      // 设置有推荐人不能编辑
      if (item.tjrId) {
        this.isDisabled = true
      } else {
        this.isDisabled = false
      }
      this.addOrEdit = 'edit'
      this.agent = {
        custId: item.custId,
        custNo: item.custNo,
        yhxm: item.yhxm,
        xb: item.xb == null ? '1' : '2',
        jg: item.jg,
        csrq: item.csrq,
        sfzh: item.sfzh,
        lxdh: item.lxdh,
        dljbId: item.dljbId,
        shdz: item.shdz,
        khhmc: item.khhmc,
        khm: item.khm,
        yhkh: item.yhkh,
        tjrId: item.tjrId,
        tjrIdNew: item.tjrIdNew,
        zcrq: item.zcrq,
        djr: item.djr,
        djsj: item.djsj,
        dljb: item.dljb,
        sfxnyh: item.sfxnyh + '',
        sjtjr: item.sjtjr,
        bljsfjs: item.bljsfjs + '',
        gxjsfjs: item.gxjsfjs + '',
        djd: item.djd,
        tcje: item.tcje,
        yhzt: item.yhzt + ''
      }
      this.dialogVisible = true
    },
    // 获取代理人列表
    fetchGetAgentList () {
      this.$store.dispatch('agent/GetAgentUserList').then((res) => {
        if (res.code === 200) {
          this.agentUserList = this.getTreeData(res.data)
        }
      })
    },
    getTreeData(data) {
			for (var i = 0; i < data.length; i++) {
				if (data[i].children.length < 1) {
					// children若为空数组，则将children设为undefined
					data[i].children = undefined
				} else {
					// children若不为空数组，则继续 递归调用 本方法
					this.getTreeData(data[i].children)
				}
			}
			return data
		},
    // 初始化代理级别
    initDljb () {
      this.$store.dispatch('sysConfig/GetSysConfigSelect', this.queryData).then((res) => {
          if (res.code === 200) {
            this.dljbSelect = res.data
          } else if (res.code == 500) {
            this.$message.error(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    // 导出
    download() {
      this.queryData.beginDate = this.changtime && this.changtime.length != 0 ? this.changtime[0] + ' 00:00:00' : ''
      this.queryData.endDate = this.changtime && this.changtime.length != 0 ? this.changtime[1] + ' 23:59:59' : '' 
      this.queryData.pageSize = this.page.pageSize
      this.queryData.pageIndex = this.tablePage
      this.exportLoding = true
      this.$store.dispatch('agent/DownloadData', this.queryData).then((res) => {
          let blob = new Blob([res], {type: 'application/vnd.ms-excel;charset=utf-8'})
          let downloadElement = document.createElement('a')
          let href = window.URL.createObjectURL(blob)
          downloadElement.href = href
          // downloadElement.setAttribute('download', 'fileName')
          document.body.appendChild(downloadElement)
          downloadElement.click()
          document.body.removeChild(downloadElement)
          window.URL.revokeObjectURL(href)
          this.tableLoading = false
      })
      .catch((err) => {
        console.log(err)
        this.tableLoading = false
      })
    },
    // 初始化弹窗
    getRoleDetail () {
        this.$store.dispatch('system/RoleEditorDetail', 0).then((res) => {
            if (res.code === 200) {
                if (res.data != null) {
                    this.agentDisable = res.data
                }                   
            } else {
                this.$message.error(res.msg)
            }
        })
    },
    // 提交订单
    confirmDialog (formName) {
      let optionUrl, optionTxt
      if (this.addOrEdit == 'add') {
        optionUrl = 'agent/AddAgent'
        optionTxt = '新增成功'
      } else {
        optionUrl = 'agent/UpdateAgent'
        optionTxt = '编辑成功'
      }
      this.$refs.dialog_rule.validate((valid) => {
        if (valid) {
          this.$store.dispatch(optionUrl, this.agent).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: optionTxt
              })
              this.$refs.dialog_rule.clearValidate()
              this.$refs.dialog_rule.resetFields()
              this.agent = {
                    custId: '',
                    custNo: '',
                    yhxm: '',
                    xb: '',
                    jg: '',
                    csrq: '',
                    sfzh: '',
                    lxdh: '',
                    dljbId: '',
                    shdz: '',
                    khhmc: '',
                    khm: '',
                    yhkh: '',
                    zcrq: '',
                    djr: '',
                    djsj: '',
                    dljb: '',
                    sfxnyh: '',
                    sjtjr: '',
                    bljsfjs: '',
                    gxjsfjs: '',
                    djd: '',
                    tcje: '',
                    state: ''
              }
              this.dialogVisible = false
              this.fetchData()
              this.fetchGetAgentList()
            } else {
              this.$message.error(res.msg)
              // this.dialogVisible = false
            }
          })
        } else {
            return false
        }
      })
    },    
    // 节点单击事件
    handleNodeClick(data) {
      this.queryData.agentId = data.id
      this.fetchData()
    },
    // 获取数据
    fetchData () {
      this.tableLoading = true
      this.queryData.beginDate = this.changtime && this.changtime.length != 0 ? this.changtime[0] + ' 00:00:00' : ''
      this.queryData.endDate = this.changtime && this.changtime.length != 0 ? this.changtime[1] + ' 23:59:59' : '' 
      this.queryData.pageSize = this.page.pageSize
      this.queryData.pageIndex = this.tablePage
      this.$store.dispatch('agent/GetAgentList', this.queryData).then((res) => {
          if (res.code === 200) {
            this.tableData = res.data.list
            if (this.tableData == '') {
              this.pageShow = false
            } else {
              this.pageShow = true
            }
            this.page.total = res.data.total
            this.page.currentPage = this.tablePage
          } else if (res.code == 500) {
            this.$message.error(res.msg)
          } else {
            this.$message.error(res.msg)
          }
          this.tableLoading = false
        })
        .catch((err) => {
          console.log(err)
          this.tableLoading = false
        })
    }
  },
  mounted () {
    this.fetchData()
    this.fetchGetAgentList()
    this.getRoleDetail()
    this.initDljb()
    // 权限配置
    let permission = sessionStorage.getItem('permission')
    if (permission) {
      permission = JSON.parse(permission)
      permission.forEach(p => {
        if (p.code == '11000' && p.permissions.indexOf('edit') != -1) {
          this.hasPermission = true
        }
      })
    }
    let userInfo = sessionStorage.getItem('userInfo')
    if (userInfo) {
      userInfo = JSON.parse(userInfo)
      this.user = userInfo
      console.log(userInfo)
      if (userInfo.roleId == 2 || userInfo.roleId == 1) {
        this.hasRole = true
      }
    }
  },
  computed: {
    stateType(state) {
        return function(state) {
            if (state == '0') {
              return '待确认'
            }
            if (state == '1') {
              return '已确认'
            }
            if (state == '2') {
              return '停用'
            }
            if (state == '3') {
              return '撤销'
            }
        }
    },
    dljbType(state) {
        return function(state) {
            if (state == 'jlwh0001') {
              return '市级代理'
            }
            if (state == 'jlwh0002') {
              return '省级代理'
            }
            if (state == 'jlwh0003') {
              return '大区代理'
            }
            if (state == 'jlwh0004') {
              return '一星代理'
            }
            if (state == 'jlwh0005') {
              return '二星代理'
            }
            if (state == 'jlwh0006') {
              return '三星代理'
            }
            if (state == 'jlwh0007') {
              return '四星代理'
            }
            if (state == 'jlwh0008') {
              return '五星代理'
            }
        }
    }
  }
}
</script>
<style scoped>
.agent {
  padding: 10px 15px;
  margin: 0 !important;
  height: 100%;
}

.contaniner {
  display: flex;
  height: 100%;
}
.left {
  width: 16%;
  height: 100%;
  margin-right: 10px;
}
.right {
  height: 100%;
  width: calc(84% - 10px);
}
</style>
<style lang="scss">
.agent {
  .search-button {
    line-height: 30px !important;
  }
  .el-card__header {
    border-bottom: none !important;
  }
  .el-col-4 {
    width: 15%;
  }
  .el-date-editor {
    width: 100% !important;
  }
  .el-card__header,
  .el-card__body {
    padding: 15px;
  }
  .body {
    margin-top: 10px;
    background-color: #fff;
    .btn-list {
      float: right;
    }
    .fix-lh {
      line-height: 32px;
    }
    .text-right {
      text-align: right;
    }
    // .home-form{
    //     margin-bottom: 7px;
    //     margin-top: -17px;
    // }
    .el-input.is-disabled .el-input__inner {
      color: #606266;
    }
    .el-card__header,
    .el-card__body {
      padding: 15px;
    }
    .el-input.is-disabled .el-input__inner {
      color: #606266;
    }
    .el-table__body {
      tr td:nth-child(2) span {
        // color: #409eff;
        // cursor: pointer;
      }
      tr td:nth-child(5) span {
        // cursor: pointer;
      }
      tr td:nth-child(6) span {
        // color: #409eff;
        cursor: pointer;
      }
    }
    .table-body {
      margin-top: -15px;
    }
  }
  .el-select {
    width: 100%;
  }
  .top-bar {
    display: flex;
    min-width: 750px;
    .keyword-bar {
      width: 240px;
      margin-right: 10px;
    }
    .time-bar {
      width: 430px;
    }
  }
  .demo-ruleForm.el-input{
     width: 240px;
  }
  
}
</style>
